<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML遮罩层，背景半透明，只显示中间部分</title>
<style>
#msgDiv {
    z-index:10001;
    width:500px;
    height:400px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:50%;
    top:20%;
    font-size:12px;
    margin-left:-225px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
    opacity: 0.6;
}
#msgShut{
	float: right;
	padding: 3px;
}
#msgShut a:link {color: #000;} /* 未访问的链接 */
#msgShut a:visited {color: #000;} /* 已访问的链接 */
#msgShut a:hover{cursor: auto;color: #0F0;} /* 鼠标在链接上 */ 
#msgShut a:active {color: #00F;}

</style>
<script type="text/javascript" language="javascript">
function showDetail(){//show detail
	//msgDiv
	var msgDiv = document.getElementById("msgDiv");
	msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px";
	//bgDiv
	var bgDiv = document.getElementById("bgDiv");
	bgDiv.style.width = document.body.offsetwidth + "px";
	bgDiv.style.height = screen.height + "px";
	//msgShut
	var msgShut = document.getElementById("msgShut");
	msgShut.onclick = function(){
		bgDiv.style.display = msgDiv.style.display = "none";
	}
	//content
	msgDiv.style.display = bgDiv.style.display = "block";
	var msgDetail = document.getElementById("msgDetail");
	msgDetail.innerHTML = "<p style='line-height:50px;font-size:30px;text-align:center'>显示框中的内容</p>";
}
</script>
</head>

<body>
<div id="msgDiv">
	<div id="msgShut"><a href="###">关闭</a></div>
    <div id="msgDetail"></div>
</div>
<div id="bgDiv"></div>
<p></p>
<p><a href="#" onClick="showDetail()">点击我看看</a></p>
</body>
</html>
